<template>
	<view>
		<Pageskeleton v-if="isLoading" />
		<template v-else>
			<view class="main">
				<!-- 头部 -->
				<view class="header common" v-if="menuListt.length > 0">
					<swiper :indicator-dots="indicatorDots" indicator-dots="true" indicator-active-color="#42A8F3"
						class="swiper1">
						<swiper-item v-for="(item,index) in menuListt" :key="index" class="swiperitem">
							<view class="h-itme" v-for="(items,indexs) in item" :key="items.id" @click="goto(items.pages)">
								<text class="t-icon text-icon" :class="items.icon"></text>
								<view class="text">{{ items.title }}</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
			
				<!-- grid-item-large -->
				<view class="common grid-container">
					<view class="grid-item" v-for="(item, index) in gridlist" :key="index"
						:class="{ 'grid-item-large': item.ists }" @click="$goto(item.url)">
						<view class="grid-items" :style="{ backgroundColor: item.bgcolor }">
							<text class="gridtile">{{ item.title }}</text>
							<text class="gridabout">{{ item.about }}</text>
							<text :class="item.iconcss"></text>
						</view>
					</view>
				</view>
			
				<!-- 园区资讯 -->
				<view class="footer common">
					<view class="more">
						<view class="more-left"><text class="t-icon t-icon-news left-new"></text>园区快讯</view>
						<view class="more-right" @click="goto('/pagesParkarea/parkarea/information')">更多<uni-icons
								color="#8a8a8a" type="forward"></uni-icons></view>
					</view>
					<view class="parknews" v-for="(item, index) in parknewsList" :key="index" @click="SharedWorkers(item.src)">
						<view class="parknews-left">
							<view class=".parknews-leftt">
								<text class="parknews-left-title">{{ item.title }}</text>
							</view>
							<view class="parknews-left-time">{{ $getRelativeTimes(item.createTime) }}</view>
						</view>
						<view class="parknews-right">
							<image :src="item.filePath" mode="scaleToFill" />
						</view>
					</view>
				</view>
				<!-- 弹窗 -->
				<!-- <uni-popup ref="locationModal" type="dialog">
					<uni-popup-dialog ref="inputClose" title="选择房间号" type="info" @confirm="onConfirmlocationModal"
						@close="onLocationClose">
						<view class="form-wrap modal">
							<view class="form-item">
								<view class="label">房间号</view>
								<view class="form-control">
									<w-select :width="100 + '%'" :filterable="true" :search="true" placeholder="请输入房间号"
										v-model="checkLocation" :list="list" valueName="title" keyName="id"
										@input="onLocationInput" @change="onLocationChange">
									</w-select>
								</view>
							</view>
						</view>
					</uni-popup-dialog>
				</uni-popup>
				 -->
				<tabBar selectedIndex="0" selectedTab="0" />
			</view>
		</template>
	</view>
</template>

<script>
	// 引入api
	// import {
	// 	getPropertyAddressList
	// } from "@/proxy/asset/property.api.js";
	import {
		getAdminRuleAppAll,
		getOaNewsAll
	} from "@/proxy/asset/admin.api.js";
	// import {
	// 	debounce
	// } from "@/utils/common";
	import Pageskeleton from './components/Pageskeleton.vue'

	export default {
		components:{
			Pageskeleton
		},
		onLoad() {
			// console.log("加载完成")
			// let iSrule = uni.getStorageSync("rule").length;
			// if(iSrule === 0){
			// 	// 跳转登录页
			// 	uni.navigateTo({
			// 		url:"/pagesMember/login/login"
			// 	})
			// 	return false;
			// }
			this.menuListt = uni.getStorageSync("rule")
			console.log("权限app菜单", this.menuListt)
		},
		async mounted() {
			// this.isLoading = true;
			// 同时加载数据
			await Promise.all([
				this.getAdminRuleAppData(),
				this.getOaNewsAllData(),
			])
			this.isLoading = false;
		},
		data() {
			return {
				isLoading:true,
				// 房间列表
				list: [],
				// checkLocation: "", // 房间昵称
				// PropertyAddress: {}, // 房间基本信息
				menuListt: [],
				parknewsList: [], // new新闻列表
				pageNum: 1, // 第一页
				pageSize: 3, // 3条
				gridlist: [
					// {
					// 	iconcss: "t-icon t-icon-zongheyuanqu text-icon",
					// 	title: "汇标集团简介",
					// 	about: "ABOUT HUIBIAO JITUAN",
					// 	bgcolor: "#EBF5FF",
					// 	ists: true,
					// 	url:""
					// },
					// {
					// 	iconcss: "t-icon t-icon-mingpianjia-xuanzhong text-icons",
					// 	title: "个人名片",
					// 	about: "PERSONAL BUSINESS CARD",
					// 	bgcolor: "#E7EAFB",
					// 	ists: false,
					// 	url:""
					// 	// url:"/pagesH5/index/index?url=http://hbvcard.gzsttc.com/#/pages/user/create"
					// },
					{
						iconcss: "t-icon t-icon-a-shiyanpingshiyanyanjiu text-icons",
						title: "检测服务",
						about: "TESTING SERVICE",
						bgcolor: "#F8E8E8",
						ists: false,
						url: "/pagesClient/base/login"
					},
					{
						iconcss: "t-icon t-icon-remenhuodong text-icons",
						title: "活动主题",
						about: "ACTIVITY THEME",
						bgcolor: "#FFDFEE",
						ists: false,
						url: "/pagesActivity/activity/login"
					},
					// {
					// 	iconcss: "t-icon t-icon-huiyishi2 text-icons",
					// 	title: "会议室预约",
					// 	about: "MEETING ROOM RESERVATION",
					// 	bgcolor: "#FFDFEE",
					// 	ists: false,
					// 	url:""
					// },
					// {
					// 	iconcss: "t-icon t-icon-xiebaogao text-icons",
					// 	title: "来访登记",
					// 	about: "VISITOR REGISTRATION",
					// 	bgcolor: "#DEFEE9",
					// 	ists: false,
					// 	// url:"/pagesH5/index/index?url=http://hbh5.gzsttc.com/h5/index.html"
					// 	url:""
					// },
					// {
					// 	iconcss: "t-icon t-icon-a-jianyanxiance-dianji1x text-icons",
					// 	title: "建言献策",
					// 	about: "OFFER SUGGESTIONS STRATEGIES",
					// 	bgcolor: "#F7E6CC",
					// 	ists: false,
					// 	url:""
					// 	// url:"/pagesH5/index/index?url=http://hbh5.gzsttc.com/h5/feedback.html"
					// 	// url:"/pagesH5/index/index?url=https://limsapi.gzhbcss.com/clienth5/index.html"
					// },
				]
			}
		},
		methods: {
			// 点击园区快讯
			SharedWorkers(src) {
				console.log("跳转园区快讯详情", src)
				uni.navigateTo({
					url: "/pagesParkarea/parkarea/details?url=" + src,
					// url: "/pagesParkarea/parkarea/details?id=" + id
				});
			},
			// SharedWorkers(id) {
			// 	console.log("跳转园区快讯详情", id)
			// 	uni.navigateTo({
			// 		url: "/pagesParkarea/parkarea/details?url=" + ,
			// 		// url: "/pagesParkarea/parkarea/details?id=" + id
			// 	});
			// },
			// 跳转函数
			goto(pages) {
				if (pages == "/pages/asset/scanAssets") {
					console.log("盘点");
					this.$refs.locationModal.open();
				} else {
					uni.navigateTo({
						url: pages,
					});
				}
			},
			// 关闭弹出层
			onLocationClose() {
				this.$refs.locationModal.close();
			},
			// 获取app菜单接口
			async getAdminRuleAppData() {
				try {
					const result = await getAdminRuleAppAll();
					if (result.code == 200) {
						// 使用 Map 合并并去重
						const merged = Array.from(
							new Map([...this.menuListt, ...result.data].map(obj => [obj.id, {
								...obj
							}])).values()
						).filter(item => item.iaApp !== 1); // 过滤掉 iaApp 等于 1 的项
						this.menuListt = merged
						var data1 = this.menuListt
						var list1 = []
						//一次显示8 个
						for (var i = 0, len = data1.length; i < len; i += 8) {
							list1.push(data1.slice(i, i + 8));
						}
						this.menuListt = []
						for (var j = 0; j < list1.length; j++) {
							this.menuListt.push(list1[j])
						}
						// console.log("重装菜单list", this.menuListt)

						// console.log("获取app菜单接口",merged)
					} else {
						this.$toast({
							title: result.data.msg,
						});
					}
				} catch (err) {
					this.$toast({
						icon: 'none',
						title: '发起失败，请联系管理员！',
						duration: 2000
					})
					console.log(err);
				}
			},
			// 获取新闻列表
			async getOaNewsAllData() {
				try {
					const result = await getOaNewsAll({
						params: {
							pageNum: this.pageNum,
							pageSize: this.pageSize
						}
					});
					if (result.code == 200) {
						this.parknewsList = result.rows;
						// console.log("获取新闻列表", result)
					} else {
						this.$toast({
							title: result.data.msg,
						});
					}
				} catch (err) {
					this.$toast({
						icon: 'none',
						title: '发起失败，请联系管理员！',
						duration: 2000
					})
					console.log(err);
				}
			},
			// 防抖搜索（获取房间数据）
			// onLocationInput:debounce(async function(e){
			// 	console.log("防抖搜索", e) // 请求
			// 	await getPropertyAddressList({
			// 		params: {
			// 			title: e
			// 		}
			// 	}).then((result) => {
			// 		if (result.code == 200) {
			// 		  this.list = result.data;
			// 		} else {
			// 		  this.$toast({
			// 		    title: result.data.msg,
			// 		  });
			// 		}
			// 		console.log("发送了请求",result)
			// 	}).catch(err => {
			// 		this.$toast({
			// 			icon: 'none',
			// 			title: '发起失败，请联系管理员！',
			// 			duration: 2000
			// 		})
			// 		console.log(err);
			// 	})
			// }, 500),
			// // 选择房间号
			// onLocationChange(e){
			// 	console.log("选择房间号", e)
			// 	this.PropertyAddress = e;
			// },
			// // 选择房间号
			// onConfirmlocationModal(){
			// 	if (JSON.stringify(this.PropertyAddress)=='{}') {
			// 		this.$toast({
			// 			icon: "none",
			// 			title: "请选择房间号",
			// 		});
			// 		return false;
			// 	}
			// 	// 确定后扫码,this.chooseValue房间号ID
			// 	uni.navigateTo({
			// 		url: "/pages/asset/scanAssets?id=" + this.PropertyAddress.id +
			// 			"&address=" + this.PropertyAddress.title
			// 	});
			// },
		}
	}
</script>

<style lang="scss">
	/*阿里巴巴矢量图标库配置，样式写在全局中*/
	// .text-icon {
	//     width: 1em;
	//     height: 1em;
	//     vertical-align: -0.15em;
	//     fill: currentColor;
	//     overflow: hidden;
	// }
	page {
		height: 100vh;
		background: #42A8F3;
	}

	.main {
		padding: 20rpx;

		// background-color: rgba(204, 204, 204, 0.5);
		.common {
			background: #fff;
			border-radius: 20rpx;
			margin-bottom: 5rpx;
		}

		.header {

			/* 传统 swiper1 */
			.swiper1 {
				width: 100%;
				height: 370rpx;

				.swiperitem {
					box-sizing: border-box;

					&::after {
						content: "";
						display: block;
						clear: both;
					}
				}
			}

			.h-itme {
				width: 25%;
				display: flex;
				align-items: center;
				flex-direction: column;
				justify-content: center;
				text-align: center;
				// line-height: 60rpx;
				padding: 25rpx 15rpx;
				box-sizing: border-box;
				float: left;

				.text-icon {
					// color: #0081ff;
					// font-size: 70rpx;
					width: 70rpx;
					height: 70rpx;
				}

				.text {
					font-size: 28rpx;
					margin-top: 15rpx;
				}
			}
		}

		.grid-container {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			/* 3 列 */
			grid-template-rows: repeat(1, 1fr);
			/* 4 行 */
			gap: 10rpx;
			/* 单元格之间的间隙 */
			padding: 15rpx;

			.grid-item {
				height: 140rpx;
				border-radius: 10rpx;

				.grid-items {
					position: relative;
					height: 100%;
					padding: 5rpx;
					box-sizing: border-box;
					border-radius: 10rpx;

					.gridtile {
						font-size: 28rpx;
						display: inline-block;
						color: #000000;
						font-weight: 300;
					}

					.gridabout {
						display: block;
						font-size: 17rpx;
						color: #B5BDBF;
					}

					.text-icon {
						width: 50%;
						height: 50%;
						right: 8rpx;
						bottom: 8rpx;
						position: absolute;
					}

					.text-icons {
						width: 70rpx;
						height: 70rpx;
						right: 8rpx;
						bottom: 8rpx;
						position: absolute;
					}
				}
			}

			.grid-item-large {
				grid-column: span 2;
				/* 横向跨越 2 列 */
				grid-row: span 2;
				/* 纵向跨越 2 行 */
				height: 290rpx;
			}
		}


		.footer {
			padding: 15rpx;

			.more {
				display: flex;
				align-content: center;
				justify-content: space-between;

				.more-left {
					font-size: 35rpx;
					font-weight: bold;
					display: flex;

					// position: relative;
					// padding-left: 30rpx;
					.left-new {
						width: 44rpx;
						height: 44rpx;
					}

					// &::before {
					//   content: "";
					//   position: absolute;
					//   left: 0;
					//   top: 50%;
					//   transform: translate(0%, -50%);
					//   width: 0;
					//   height: 0;
					//   border-top: 10px solid transparent;
					//   border-bottom: 10px solid transparent;
					//   border-left: 10px solid #0081ff;
					// }
				}

				.more-right {
					color: #8a8a8a;
					font-size: 30rpx;
				}
			}

			.parknews {
				padding: 25rpx 15rpx;
				display: flex;
				// align-items: center;
				justify-content: space-between;
				box-sizing: border-box;

				.parknews-left {
					flex: 1;

					overflow: hidden;
					/*显示文本行数*/
					-webkit-box-orient: vertical;

					.parknews-leftt {
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						/*显示文本行数*/
						-webkit-box-orient: vertical;

						// height: 90rpx; /* 或者根据需要设置具体高度 */
						.parknews-left-title {
							white-space: normal;
							font-size: 30rpx;
							// font-weight: bold;
							display: block;
							// height: 94rpx; /* 或者根据需要设置具体高度 */
							letter-spacing: 2rpx;
						}
					}

					.parknews-left-time {
						color: gray;
						font-size: 25rpx;
						margin-top: 25rpx;
					}
				}

				.parknews-right {
					height: 150rpx;

					image {
						width: 230rpx;
						height: inherit;
					}
				}
			}
		}
	}

	.form-wrap {
		background: #fff;
		border-radius: 30rpx;
		padding: 20rpx 45rpx;
		box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.1);

		&.modal {
			box-shadow: none;
			padding: 0;
			flex: 1;

			.form-item {
				&:first-child {
					padding-top: 0;
				}

				&:last-child {
					padding-bottom: 0;
				}
			}
		}

		.form-item {
			display: block;
			font-size: 28rpx;
			border-bottom: 1px solid #f2f2f2;
			padding: 12rpx 0;
		}
	}
</style>